<template>
  <div class="big-box">
    <div class="ticketList-top-btn">
      <router-link to="/ticketList">
        <el-button style="width:136px" icon="el-icon-arrow-left">返回</el-button>
      </router-link>
      <el-button @click="releaseFun()" :loading="loadingRelease" type="primary" style="width:136px" icon="el-icon-check">确定发布</el-button>
    </div>
    <div class="form-box">
      <el-form class="elform" :model="releaseForm">
        <el-form-item class="elformitem" label-width="100px" label="头图">
          <div class="img-box">
            <el-button style="width:100%;overflow:hidden" @click="ddBannerImg">{{ releaseForm.ticketUrl ? releaseForm.ticketUrl : '请选择图片' }}</el-button>
          </div>
        </el-form-item>
        <el-form-item class="elformitem" label-width="100px" label="部门">
          <el-select style="width:100%" v-model="releaseForm.deptId" filterable placeholder="请选择部门">
            <el-option v-for="item in branchList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="elformitem" label-width="100px" label="票名">
          <el-input maxlength="20" v-model.trim="releaseForm.tTypeName" placeholder="请输入票名(最多输入20个文字)"></el-input>
        </el-form-item>
        <el-form-item class="elformitem" label-width="100px" label="价格">
          <el-input-number style="width:100%" v-model="releaseForm.sprice" :step="100" controls-position="right" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item class="elformitem" label-width="100px" label="日期">
          <el-date-picker :clearable="true" style="width:100%" v-model="releaseForm.startDateStr" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="elformitem" label-width="100px" label="地址">
          <el-input maxlength="40" v-model.trim="releaseForm.address" placeholder="请输入地址(最多输入40个文字)"></el-input>
        </el-form-item>
        <el-form-item class="elformitem" label-width="100px" label="权益">
          <div class="tag-box">
            <el-tag :key="index" v-for="(item,index) in releaseForm.purpose" closable :disable-transitions="false" @close="handleClose(item)">
              {{item}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" maxlength="100" v-model="releaseForm.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm('enter')" @blur="handleInputConfirm('click')">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加权益</el-button>
          </div>
        </el-form-item>
        <el-form-item class="elformitem" label-width="100px" label="库存">
          <el-input-number style="width:100%" v-model="releaseForm.inum" :step="100" controls-position="right" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item class="elformitem" label-width="100px" label="入场时间">
          <el-time-select :clearable="true" style="width:50%" placeholder="开始时间" v-model="releaseForm.startTimeStr" :picker-options="{ start: '00:00', step: '00:01', end: '23:59' }"></el-time-select>
          <el-time-select :clearable="true" style="width:49%" placeholder="结束时间" v-model="releaseForm.endTimeStr" :picker-options="{ start: '00:00', step: '00:01', end: '23:59', minTime: releaseForm.startTimeStr }">
          </el-time-select>
        </el-form-item>
        <el-form-item class="elformitem" label-width="100px" label="报名字段">
          <div @click="linkOther('/fieldManagement')" v-if="!FieldList.length">
            <el-button style="width:100%" plain>请添加报名字段</el-button>
          </div>
          <el-select @change="fieldListChange" v-else style="width:100%" v-model="releaseForm.tempId" filterable clearable placeholder="请选择">
            <el-option v-for="item in FieldList" :key="item.id" :label="item.tableName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="elformitem" label-width="100px" label="购票协议">
          <div @click="linkOther('/userProtocol')" v-if="!proList.length">
            <el-button class="btn-box" style="width:100%" plain>请添加购票协议</el-button>
          </div>
          <el-select :disabled="true" v-else multiple style="width:100%" v-model="releaseForm.agreementId" filterable placeholder="请选择">
            <el-option v-for="item in proList" :key="item.agreementId" :label="item.title" :value="item.agreementId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="elformitem" label-width="100px" label="门票图片">
          <div class="img-box">
            <el-button style="width:100%;overflow:hidden" @click="dduploadImage">{{ releaseForm.imgUrl ? releaseForm.imgUrl : '请选择图片' }}</el-button>
          </div>
          <p style="color:#F56C6C">*建议上传宽度为1080px的jpg、png等格式图片</p>
        </el-form-item>
        <!-- <el-form-item class="elformitem" label-width="100px" label="是否需要审核">
          <el-switch v-model="releaseForm.isCheck" active-text="需要" inactive-text="不需要"></el-switch>
        </el-form-item> -->
      </el-form>
    </div>
    <div class="myTicket-box">
      <div class="ticket-box">
        <div v-bind:style="{ backgroundImage:'url(' + releaseForm.imgUrl + ')', 
      backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'cover'}" class="ticket">
          <div class="ticket-name">{{releaseForm.tTypeName}}
            <!-- <div class="ticket-isActive">未激活</div> -->
          </div>
          <div class="ticket-equity">
            {{ initDetail(JSON.stringify(releaseForm.purpose)) }}
            <div style=" left: -30px;" class="ticket-equity-radius"></div>
            <div style="right:-30px" class="ticket-equity-radius"></div>
          </div>
          <div class="ticket-time">
            <span>{{ $moment(releaseForm.startDateStr[0], "MM月DD日")}}</span>
            <span v-if="releaseForm.startDateStr[1]">-</span>
            <span>{{ $moment(releaseForm.startDateStr[1], "MM月DD日") }}</span>
            <span> {{ releaseForm.startTimeStr }}</span>
            <span v-if="releaseForm.endTimeStr">-</span>
            <span> {{ releaseForm.endTimeStr }}</span>
          </div>
          <div v-if="releaseForm.address" class="ticket-time">
            地址:{{releaseForm.address}}
          </div>
        </div>
      </div>
      <div v-if="filedFrom.length!=0" class="myTicket-content">
        <div class="information-box">
          <div class="title2-box">
            <p>用票人信息</p>
          </div>
          <div v-for="(it,index) of filedFrom" :key="index" class="ticket2-time">
            {{it.attribute.titName}}:
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import GetDataFun from "./../js/GetDataFun.js"; //得到一些数据的方法
export default {
  data() {
    return {
      filedFrom: [], //字段编码
      filedFromList: [], //字段编码数据集
      inputVisible: false,
      loadingRelease: false, //发布门票
      releaseForm: {
        ticketUrl: "",
        deptId: "", //部门id
        tTypeName: "", //票种
        sprice: "", // 价格
        stime: "",
        etime: "",
        startDateStr: [], //开始日期//结束日期
        address: "", //地址
        purpose: [], //权益
        inputValue: "",
        inum: 0, //库存
        startTimeStr: "", //入场开始时间
        endTimeStr: "", //入场结束时间
        tempId: "", //报名字段
        agreementId: [],
        imgUrl: "",
        isCheck: false // 0需要审核 1不需要审核
      }, //门票发布表单
      fileName: "", // 上传文件的名字
      branchList: [], // 部门数据
      ticketType: [], //票种类型
      FieldList: [], //票字段
      proList: []
    };
  },
  created() {
    let ticketD =
      this.$route.params.ticketD ||
      JSON.parse(sessionStorage.getItem("ticketD"));
    console.log("ticketD", ticketD);
    if (ticketD) {
      let agreementData = [];
      let agreement = ticketD.agreementId.split(",");
      for (let i = 0; i < agreement.length; i++) {
        let element = agreement[i] - 0;
        agreementData.push(element);
      }

      let startDateStr = [];
      let startD = this.$moment(ticketD.stime || "", "YYYY-MM-DD");
      let endD = this.$moment(ticketD.etime || "", "YYYY-MM-DD");
      startDateStr.push(startD, endD);
      this.releaseForm = {
        ticketUrl: ticketD.ticketUrl || 0, // 部门id
        deptId: ticketD.deptId || 0, // 部门id
        tTypeName: ticketD.tTypeName || "", //票种
        sprice: ticketD.sprice || "", //票种
        stime: ticketD.stime || "",
        etime: ticketD.etime || "",
        startDateStr: startDateStr, // 日期
        address: ticketD.address || "", //地址
        purpose: ticketD.purpose ? JSON.parse(ticketD.purpose) : "", //权益
        inum: ticketD.inum || 0, //库存
        startTimeStr: ticketD.tTypeDate.split("-")[0] || "", //入场开始时间
        endTimeStr: ticketD.tTypeDate.split("-")[1] || "", //入场结束时间
        tempId: ticketD.tempId, //报名字段
        //  agreementId: agreementData, // 协议
        agreementId: [], // 协议 (改成默认全选)
        imgUrl: ticketD.imgUrl, // 门票图片
        isCheck: ticketD.isCheck == 1 ? false : true // 是否需要审核
      }; //门票发布表单
    }
    if (this.$route.query.type == "goBack") {
      this.releaseForm = JSON.parse(sessionStorage.getItem("otherDate"));
    }
    // this.getTicketType();
    this.getField(); // 获取报名
    this.getDept(); // 获取部门
    this.getAgreementList(); // 获取协议
  },
  methods: {
    fieldListChange() {
      this.filedFrom = [];
      for (let i = 0; i < this.filedFromList.length; i++) {
        if (this.releaseForm.tempId == this.filedFromList[i].id) {
          this.filedFrom = JSON.parse(this.filedFromList[i].vnote1);
        }
      }
    },
    // 初始化票权益
    initDetail(ticketDetail) {
      try {
        let detail = "";
        let detailArr = JSON.parse(ticketDetail);
        for (let i = 0; i < detailArr.length; i++) {
          if (i < detailArr.length - 1) {
            detail += detailArr[i] + " + ";
          } else {
            detail += detailArr[i];
          }
        }
        return detail;
      } catch (error) {
        return ticketDetail;
      }
    },
    linkOther(item) {
      this.$router.push({
        path: item,
        query: {
          linkType: "del"
        }
      });
      sessionStorage.setItem("otherDate", JSON.stringify(this.releaseForm));
    },
    // 上传头图
    ddBannerImg() {
      let _t = this;
      DingTalkPC.biz.util.uploadImage({
        multiple: false, //是否多选，默认false
        max: 1, //最多可选个数
        onSuccess: function(result) {
          _t.releaseForm.ticketUrl = result[0];
        },
        onFail: function(err) {
          _t.$message({
            message: "上传失败",
            type: "warning"
          });
        }
      });
    },
    // 上传门票图片
    dduploadImage() {
      let _t = this;
      DingTalkPC.biz.util.uploadImage({
        multiple: false, //是否多选，默认false
        max: 1, //最多可选个数
        onSuccess: function(result) {
          _t.releaseForm.imgUrl = result[0];
        },
        onFail: function(err) {
          _t.$message({
            message: "上传失败",
            type: "warning"
          });
        }
      });
    },
    handleClose(tag) {
      this.releaseForm.purpose.splice(this.releaseForm.purpose.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm(item) {
      let inputValue = this.releaseForm.inputValue;
      if (inputValue) {
        this.releaseForm.purpose.push(inputValue);
      }
      if (item == "click") {
        this.inputVisible = false;
      }
      if (item == "enter") {
        this.inputVisible = true;
      }
      this.releaseForm.inputValue = "";
    },
    // 获取部门数据
    getDept() {
      let params = {
        activityId: this.$store.state.activityId,
        corpId: localStorage.getItem("corpId")
        // appkey: localStorage.getItem("appkey")
      };
      this.$http
        .get("/api/isv/department/getAllScopesDeptList", { params: params })
        .then(
          res => {
            if (res.data.success) {
              this.branchList = res.data.result;
            } else {
              this.$message({
                message: res.data.errorMsg || "数据获取失败",
                type: "warning"
              });
            }
          },
          err => {
            this.$message.error("服务器出小差了");
          }
        );
    },
    // 获取购票协议
    getAgreementList() {
      let params = {
        typeId: 1,
        activityId: this.$store.state.activityId,
        start: 0,
        limit: 50,
        isPay: "pay"
      };
      this.$http.post("/api/isv/agreeMent/queryAgreeMent", params).then(
        res => {
          if (res.data.success) {
            this.proList = res.data.result.agreeList;
            if (this.proList.length != 0) {
              this.proList.map(item => {
                this.releaseForm.agreementId.push(item.agreementId);
              });
            }
          } else {
            this.$message({
              message: res.data.errorMsg || "数据获取失败",
              type: "warning"
            });
          }
        },
        err => {
          this.$message.error("服务器出小差了");
        }
      );
    },
    // 得到报名字段
    getField() {
      this.$http
        .post("/api/isv/ticketType/queryTempList", {
          activityId:
            this.$store.state.activityId || localStorage.getItem("activityId"),
          isPay: "pay"
        })
        .then(
          res => {
            if (res.data.success) {
              this.FieldList = [];
              this.filedFromList = res.data.result;
              this.fieldListChange();
              res.data.result.forEach(ele => {
                this.FieldList.push({
                  id: ele.id,
                  tableName: ele.tableName
                });
              });
            } else {
              this.$message({
                message: res.data.errorMsg || "报名字段获取失败",
                type: "warning"
              });
            }
          },
          err => {
            this.$message.error("服务器出小差了");
          }
        );
    },
    // 得到票种数据
    getTicketType() {
      this.$http
        .post("/api/isv/ticketType/queryTicketType", {
          activityId: this.$store.state.activityId,
          isPay: "pay"
        })
        .then(
          res => {
            if (res.data.success) {
              this.ticketType = [];
              for (let i = 0; i < res.data.result.length; i++) {
                this.ticketType.push({
                  tTypeName: res.data.result[i].tTypeName,
                  key: i
                });
              }
            } else {
              this.$message({
                message: res.data.errorMsg || "票种数据获取失败",
                type: "warning"
              });
            }
          },
          err => {
            this.$message.error("服务器出小差了");
          }
        );
    },
    // 发布门票
    releaseFun() {
      this.releaseForm.isCheck = this.releaseForm.isCheck == false ? 1 : 0;
      if (!this.releaseForm.ticketUrl) {
        this.$message({
          message: "请上传头图",
          type: "warning"
        });
        return;
      }
      if (!this.releaseForm.deptId) {
        this.$message({
          message: "请输入部门ID",
          type: "warning"
        });
        return;
      }
      if (!this.releaseForm.tTypeName) {
        this.$message({
          message: "请输入票种",
          type: "warning"
        });
        return;
      }
      if (!this.releaseForm.sprice) {
        this.$message({
          message: "请输入价格",
          type: "warning"
        });
        return;
      }
      if (this.releaseForm.startDateStr.length == 0) {
        this.$message({
          message: "请选择日期",
          type: "warning"
        });
        return;
      }
      if (!this.releaseForm.address) {
        this.$message({
          message: "请输入地址",
          type: "warning"
        });
        return;
      }
      if (!this.releaseForm.purpose.length) {
        this.$message({
          message: "请输入权益",
          type: "warning"
        });
        return;
      }
      if (this.releaseForm.inum === "") {
        this.$message({
          message: "请输入库存",
          type: "warning"
        });
        return;
      }
      if (!this.releaseForm.startTimeStr) {
        this.$message({
          message: "请输入开始时间",
          type: "warning"
        });
        return;
      }
      if (!this.releaseForm.endTimeStr) {
        this.$message({
          message: "请输入结束时间",
          type: "warning"
        });
        return;
      }
      if (!this.releaseForm.tempId) {
        this.$message({
          message: "请输入报名字段",
          type: "warning"
        });
        return;
      }
      if (!this.releaseForm.agreementId.length) {
        this.$message({
          message: "请选择购票协议",
          type: "warning"
        });
        return;
      }
      if (!this.releaseForm.imgUrl) {
        this.$message({
          message: "请上传门票图片",
          type: "warning"
        });
        return;
      }
      let agreementIdList = "";
      agreementIdList = this.releaseForm.agreementId.join();
      let subData = {
        // 门票发布表单
        activityId: this.$store.state.activityId,
        ticketUrl: this.releaseForm.ticketUrl,
        deptId: this.releaseForm.deptId,
        tTypeName: this.releaseForm.tTypeName, //票种
        sprice: this.releaseForm.sprice, // 价格
        stime: this.releaseForm.startDateStr[0],
        etime: this.releaseForm.startDateStr[1],
        startDateStr: this.$moment(
          this.releaseForm.startDateStr[0],
          "YYYY/MM/DD"
        ), //开始日期
        endDateStr: this.$moment(
          this.releaseForm.startDateStr[1],
          "YYYY/MM/DD"
        ), //结束日期
        address: this.releaseForm.address, //地址
        purpose: JSON.stringify(this.releaseForm.purpose), //权益
        inum: this.releaseForm.inum, //库存
        startTimeStr: this.releaseForm.startTimeStr, //入场开始时间
        endTimeStr: this.releaseForm.endTimeStr, //入场结束时间
        tempId: this.releaseForm.tempId, //报名字段
        // agreementId: JSON.stringify(this.releaseForm.agreementId), // 协议
        agreementId: agreementIdList, // 协议
        imgUrl: this.releaseForm.imgUrl, // 门票图片
        isCheck: this.releaseForm.isCheck // 是否需要审核
      };
      let apiUrl = "/api/isv/ticketPurchasePC/addTicketType";
      if (this.$route.params.ticketD) {
        subData.ticketTypeId = this.$route.params.ticketD.ticketTypeId;
        apiUrl = "/api/isv/ticketPurchasePC/addTicketType";
      }
      this.loadingRelease = true;
      subData.isPay = "pay";
      this.$http.post(apiUrl, subData).then(
        res => {
          this.loadingRelease = false;
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "数据提交成功!"
            });
            GetDataFun.getTicketList().then(res => {}, err => {});
            setTimeout(() => {
              this.$router.replace({
                name: "ticketList"
              });
            }, 2000);
          } else {
            this.$message({
              message: res.data.errorMsg || "数据提交失败",
              type: "warning"
            });
          }
        },
        err => {
          this.loadingRelease = false;
          this.$message.error("服务器出小差了");
        }
      );
    }
  }
};
</script>

<style scoped>
.el-button.is-plain:focus,
.el-button.is-plain:hover,
.el-button:focus,
.el-button:hover {
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
}
.big-box {
  width: 100%;
  min-height: 200px;
  height: auto;
  background: #fff;
  border-radius: 6px;
  padding: 16px 26px;
}
.ticketList-top-btn {
  width: 100%;
  /* border: 1px solid red; */
  height: auto;
  margin: 10px 0px 20px 0px;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
.form-box {
  width: 100%;
  height: auto;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;
  padding: 36px 500px 36px 0px;
}

.form-box:hover {
  box-shadow: 0px 0px 8px rgba(237, 237, 236, 0.6);
}
.elform {
  width: 100%;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}
.elformitem {
  width: 100%;
}
.tag-box .el-tag {
  margin-right: 10px;
}
.tag-box .button-new-tag {
  margin-right: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.tag-box .input-new-tag {
  width: 90px;
  margin-right: 10px;
  vertical-align: bottom;
}
.upload_files {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  opacity: 0;
}
.img-box {
  display: flex;
  justify-content: space-between;
}
.img-box span {
  color: #00b2a9;
  cursor: pointer;
}
.edialog-box {
  margin: 0 auto;
  width: 375px;
  height: 756px;
  background-color: #fff;
  -webkit-box-shadow: 0 4px 30px 0 rgba(4, 59, 85, 0.1);
  -moz-box-shadow: 0 4px 30px 0 rgba(4, 59, 85, 0.1);
  box-shadow: 0 4px 30px 0 rgba(4, 59, 85, 0.1);
  -moz-border-radius: 60px;
  border-radius: 60px;
  position: relative;
}
.fram {
  position: absolute;
  top: 0;
  left: 0;
  padding: 56px 22px 18px;
  width: 373px;
  height: 754px;
  background-color: #eee;
  -moz-border-radius: 80px;
  border-radius: 80px;
}
.fram-box {
  margin: 0 auto;
  padding: 20px 10px;
  height: 745px;
  margin: 1px;
}
.user-box {
  margin-top: 10px;
  width: 100%;
  line-height: 25px;
  padding: 20px 20px;
  border-radius: 4px;
  background-color: #fff;
}
.user-box p {
  font-size: 10px;
}
</style>


<style scoped>
/* 移动端门票样式 */
.myTicket-box {
  position: fixed;
  background: #fff;
  width: 450px;
  height: auto;
  right: 56px;
  top: 196px;
  border: 1px solid #ebebeb;
  padding: 3px 0px;
  border-radius: 10px;
}
.ticket-box {
  padding: 26px 20px;
  width: 100%;
  height: auto;
}
.ticket {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  background: #fff;
}
.ticket-isActive {
  position: absolute;
  right: 2px;
  top: 0px;
  font-size: 26px;
}
.ticket-name,
.ticket-equity,
.ticket-time {
  position: relative;
  width: 100%;
  height: auto;
  text-align: left;
  font-size: 30px;
  padding: 0px 10px;
}
.ticket-equity {
  font-size: 20px;
  position: relative;
  padding: 18px 10px;
  border-bottom: 1px dashed #000;
}
.ticket-equity-radius {
  position: absolute;
  bottom: -15px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: #fff;
}
.myTicket-content {
  background: #fff;
  /* width: 100%; */
  /* margin: 24px 24px; */
  padding: 48px 0px;
  /* border-radius: 12px; */
  color: #fff;
}
.information-box {
  /* color: rgb(17, 17, 17); */
  padding: 0px 30px;
}
.title2-box {
  color: #000;
  font-size: 35px;
  text-align: left;
  font-weight: 600;
}
.ticket2-time {
  font-size: 24px;
  margin-top: 14px;
  text-align: left;
  color: #000;
}
</style>
